<template>
  <el-table
      :border="true"
      :data="tableData"
      style="width: 100%">
    <el-table-column
        prop="name"
        align="center"
        label="名称"
        width="180">
    </el-table-column>
    <el-table-column
        align="center"
        label="状态"
        width="180">
      <template slot-scope="scope">
        <el-tag :type="discStat(scope.row.stat)">
          {{ discStatName(scope.row.stat) }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column
        align="center"
        label="操作">
      <el-button @click="runServer">启动</el-button>
      <el-button @click="stopServer">停止</el-button>
      <el-button @click="flushStatus">刷新状态</el-button>
    </el-table-column>
  </el-table>
</template>

<script>
// ---------------- axios ----------------------
import {startServer} from "../../api/startServer";
import {stopServer} from "../../api/startServer";

export default {
  data() {
    return {
      tableData: [
        {
          name: "英灵神殿",
          stat: "1"
        }, {
          name: "饥荒",
          stat: "2"
        }
      ]
    }
  },
  methods: {
    // ------------------- 功能 ---------------------------
    /**
     * 识别标签状态
     * */
    discStat(val) {
      let type = "success";
      switch (val) {
        case "1":
          type = "success";
          break;
        case "2":
          type = "danger";
          break;
        default:
          break;
      }
      return type;
    },

    /**
     * 识别标签名称
     * @param val
     * @returns {string}
     */
    discStatName(val) {
      let name = "运行中";
      switch (val) {
        case "1":
          name = "运行中";
          break;
        case "2":
          name = "已停止";
          break;
        default:
          break;
      }
      return name;
    },

    /**
     * 运行服务器
     */
    runServer() {
      this.startServer();
    },

    /**
     * 停止服务器
     */
    stopServer() {
      this.stopServe();
    },
    /**
     *刷新状态
     * */
    flushStatus() {

    },
    //  ---------------------- axios -----------------------------
    /**
     * 开启服务
     */
    startServer() {
      const postData = {};
      startServer(postData)
          .then(res => {
            this.$message.success(res.data.msg);
          })
          .catch(err => {
            console.error(err)
          })
    },

    /**
     * 停止服务
     */
    stopServe() {
      const postData = {};
      stopServer(postData)
          .then(res => {
            this.$message.info(res.data.msg);
          })
          .catch(err => {
            console.error(err)
          });
    }
  }
}
</script>

<style scoped>

</style>